@using BlazorSortableList.DemoApp.Client.Models

<style>
    .selected {
        border: 1px solid green !important;
        z-index: 1 !important;
    }
</style>

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Multiple selection without deselection</h1>
    <p class="mb-4">
        Multiple-selection shared lists are lists where one or more items can be dragged from one list to another and vice versa.
        Providing the same "Group" string name for both lists is what links them together. 
    </p>
    <p>The selection is not cleared if you select items and then press outside the list box.</p>

    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column">
                    <SortableList Id="@ListId1" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-background-white @(item.Selected ? "selected" : "")">
                                <p class="is-size-4 p-2 ml-4">@item.Name, @item.Selected</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="@ListId2" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card  has-border-dark @(item.Selected ? "selected" : "")">
                                <p class="is-size-4 p-2 ml-4">@item.Name, @item.Selected</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>                  
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        
    </TabControl>
</div>

@code {
    private const string ListId1 = "SharedNCSListId1";
    private const string ListId2 = "SharedNCSListId2";
    private const string GroupId = "CommonGroupNCS";

    private string codeContent1 = @"
    <SortableList Id=""@ListId1"" GroupModel=""@_group"" Context=""item"">
       <SortableItemTemplate>
         <div class=""card has-background-white @(item.Selected ? ""selected"" : """")"">
            <p class=""is-size-4 p-2 ml-4"">@item.Name, @item.Selected</p>
         </div>
       </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""@ListId2"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card  has-border-dark @(item.Selected ? ""selected"" : """")"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name, @item.Selected</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {
        private const string ListId1 = ""SharedNCSListId1"";
        private const string ListId2 = ""SharedNCSListId2"";
        private const string GroupId = ""CommonGroupNCS"";

        public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        MultiSelectionListGroup _group;

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            _group = new MultiSelectionListGroup(RefreshControl);

             var settings = new SortableListSettings() { MultiSelection = true, AvoidImplicitDeselect = true};
            _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings});
            _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings});
        }
    }
    ";


    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    CustomMultiSelectionListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _group = new CustomMultiSelectionListGroup(RefreshControl);

        var settings = new SortableListSettings() { MultiSelection = true, AvoidImplicitDeselect = true};

        _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings});
        _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings});
    }

    private void RefreshControl()
    {
        StateHasChanged();
    }
}
